<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3的响应式原理</title>
</head>
<body>
    <script>
        //源数据
        let person={
            name: "张三",
            age:18
        }

        //模拟vue2中实现响应式
        //#region
        // let p = {}
        // Object .defineProperty(p,name,{
        //     get(){
        //         有人读取name时调用
        //         return person.name
        //     },
        //     set(value){
        //         有人修改name时调用
        //         console.log('有人修改了name属性，我发现了，我要去更新页面');
        //         person.name=value
        //     }
        // })
        //#endregion
        
        //模拟vue3中实现响应式
        //#region
        // const p = new Proxy(person,{
        //     get(target,propName){
        //         console.log('有人读取了p上的某个属性');
        //         return target[propName]
        //     },
        //     sset(target, propName,value) {
        //         console.log(`有人修改了p身上的属性${propName}属性，我要去更新界面了`);
        //         target[propName] = value
        //     },
        //     defineProperty(target,propName){
        //         console.log(`有人删除了p身上的属性${propName}属性，我要去更新界面了`);
        //         return delete target[propName]
        //     }
        // })
        //#endregion

        let obj = {a:1,b:2}
        Object.defineProperty(obj,'c',{
            get(){
                return 3
            }
        })
        Object.defineProperty(obj, "c", {
            get() {
                return 4
            }
        })
    </script>
</body>
</html>